<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Admin</title>
    <link href="/layui/css/layui.css" rel="stylesheet"/>

    <style>
        iframe{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .layui-show{
            height: 100%;
            widows: 100%;
        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="font-weight: 800;font-size: 18px;color: white">邑大人事管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">

            <span class="layui-nav-bar" style="left: 20px; top: 55px; width: 0px; opacity: 0;"></span></ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><span id="ctime" style="font-size: 14px"></span></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <span id="username"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="" id="basicInformation">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:void" id="dropOut">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" >

                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;" class="layui-icon layui-icon-user"> 用户管理</a>
                    <dl class="layui-nav-child">
                        <dd ><a id="1" class="layui-icon layui-icon-search">用户查询</a></dd>
                        <dd ><a id="2" href="javascript:;"  class="layui-icon layui-icon-add-1">添加用户</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="layui-icon layui-icon-group">部门管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="3" class="layui-icon layui-icon-search">部门查询</a></dd>
                        <dd><a href="javascript:;" id="4" class="layui-icon layui-icon-add-1">添加部门</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="layui-icon layui-icon-release">职位管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="5" class="layui-icon layui-icon-search">职位查询</a></dd>
                        <dd><a href="javascript:;" id="6" class="layui-icon layui-icon-add-1">添加职位</a></dd>
                    </dl></li>

            <li class="layui-nav-item"><a href="javascript:;"  class="layui-icon-dialogue">员工管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="7" class="layui-icon layui-icon-search">员工查询</a></dd>
                    <dd><a href="javascript:;" id="8" class="layui-icon layui-icon-add-1">添加员工</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;" class="layui-icon layui-icon-username">角色管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="9" class="layui-icon layui-icon-search">角色查询</a></dd>
                    <dd><a href="javascript:;" id="10" class="layui-icon layui-icon-add-1">添加角色</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"  class="layui-icon layui-icon-auz"> 公告管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="11" class="layui-icon layui-icon-search">公告查询</a></dd>
                    <dd><a href="javascript:;" id="12" class="layui-icon layui-icon-add-1">添加公告</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"  class="layui-icon layui-icon-download-circle"> 下载中心</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="13"><i class="layui-icon layui-icon-down"></i>文件下载</a></dd>
                    <dd><a href="javascript:;" id="14"><i class="layui-icon layui-icon-up"></i>文件上传</a></dd>
                </dl>
            </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding-top: -10px;width: 100% ; height: 100%;">

            <div class="layui-tab" lay-filter="demo" lay-allowClose="true" style="width: 100% ; height: 100%;">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="0">welcome</li>
                </ul>
                <div class="layui-tab-content"  style="width: 100% ; height: 100%;">
                    <h2 class="layui-tab-item layui-show">欢迎来到邑大管理系统</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script >
    setInterval(function () {
        let date = new Date();
        let html = '';
        let m =  date.getMonth() + 1 >= 10 ? (date.getMonth() + 1) : ("0" + date.getMonth() + 1);
        let d = date.getDate()  >= 10 ? (date.getDate() ) : ("0" + date.getDate() );
        let h = date.getHours() >= 10 ? (date.getHours()) : ("0" + date.getHours()) ;
        let min = date.getMinutes() >= 10 ? (date.getMinutes()) : ("0" + date.getMinutes()) ;
        let s = date.getSeconds() >= 10 ? (date.getSeconds()) : ("0" + date.getSeconds());
        html = date.getFullYear() +'年' + m + '月'+ d + '号' + "&nbsp;&nbsp;&nbsp;" + h +':' + min +':' + s +  "&nbsp;&nbsp;星期" +"日一二三四五六".charAt(date.getDay());
        document.getElementById('ctime').innerHTML = html;
    },1000);

</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/layui/layui.all.js" ></script>
<script src="/login_style/js/jquery-1.8.2.min.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','layer','jquery'], function(){

        // 负责导航栏 和 tab 的 对应切换
        var map = [
            {},
            {link:'<iframe src="/page/user.html"></iframe>',icon:'layui-icon-search'},
            { link:'<iframe src="/page/addUser.html"></iframe>',icon:'layui-icon-add-1' } ,
            { link : '' ,  icon : 'layui-icon-search' },
            { link:'',icon:'layui-icon-add-1'},
            { link : '' ,  icon : 'layui-icon-search' },
            { link:'',icon:'layui-icon-add-1'},
            { link : '' ,  icon : 'layui-icon-search' },
            {link:'',icon:'layui-icon-add-1'},
            { link : '' ,  icon : 'layui-icon-search' },
            {link:'',icon:'layui-icon-add-1'},
            { link : '' ,  icon : 'layui-icon-search' },
            {link:'',icon:'layui-icon-add-1'},
            { link : '' ,  icon : 'layui-icon-down' },
            { link:'',icon:'layui-icon-up' }
        ]

        var element = layui.element;

        var layer = layui.layer ;

        var $ = layui.jquery ;

        element.on('tab(demo)', function(data){
            console.log(data);
        });


        element.on('nav(test)',function (evt) {

            if(!evt[0].id ){
                return ;
            }

            var change = function(demo,index){
                element.tabChange(demo, index);
            }

            var addTab= function(tab, title , content , id){
                console.log(title);
                element.tabAdd(tab , {
                    title : title,
                    content : content,
                    id : id
                })
            }

           console.log(evt[0].id)

            var isData = false ;

           $.each($(".layui-tab-title li[lay-id]"),function f() {
                var id = $(this).attr("lay-id");

                if(id === evt[0].id){
                    isData = true ;
                }
            })

            if(isData === false  ){
                addTab('demo','<i   class = \"layui-icon  ' + map[evt[0].id - 0].icon +  ' " />'+ evt[0].text  , map[evt[0].id - 0].link , evt[0].id);
            }

            change("demo",evt[0].id);
        });


        // 负责获取用户的信息
        axios.get('/userInfo').then(function (response) {

                console.log(response);

                if(response.data.status === 1){
                    window.location.href = "/index.html"
                    return ;
                }

                document.getElementById("username").innerHTML = response.data.data.username ;


            // 负责监听查询用户详细信息
            let basicInformationHtml = `
        <form class="layui-form" action="" style="padding: 30px;">
        <div class="layui-form-item">
    <label class="layui-form-label">手机号码</label>
    <div class="layui-input-block">
      <input type="number"  required  lay-verify="required" value="${response.data.data.phoneNumber}"  class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text"  required  lay-verify="required" value="${response.data.data.username}" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div style="padding-top: 9px"> ${response.data.data.roles} </div>
 </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="remarks" placeholder="" class="layui-textarea">${response.data.data.remarks}</textarea>
    </div>
  </div>
</form> `




            document.getElementById("basicInformation").addEventListener('click',function (evt) {

                layer.open({
                    type: 1
                    ,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo' //防止重复弹出
                    ,content: basicInformationHtml
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,title : "个人信息"
                    ,area: '500px;'
                });

                evt.preventDefault();

            })

            }
        ).catch(function (error) {
            console.log(error);
        });


        // 退出登录
        document.getElementById("dropOut").addEventListener('click',(e)=>{

            e.preventDefault();

            axios.get('/userInfo').then((res)=>{

                if(res.data.status === 0){
                    alert("退出成功");
                    window.location.href = "index.html";
                }else {
                    alert("退出失败")
                }

            }).catch((err)=>{
                console.log(err);
            })

        })

    });



</script>
<!--<button id="test1" >弹出层</button>-->


</body>
</html>